<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../../resources/gesture-util.js'></script>

<style>
  body,
  html {
    margin: 0;
  }
  .container {
    width: 100px;
    height: 100px;
  }
  .content-big {
    width: 200px;
    height: 200px;
  }
  .content-small {
    width: 20px;
    height: 20px;
  }
</style>

scroll with overflow
<div id='overflow-1' class='container' style='overflow-x: scroll; overflow-y: scroll'>
  <div class='content-big'>Content</div>
</div>

auto with overflow
<div id='overflow-2' class='container' style='overflow-x: auto; overflow-y: auto'>
  <div class='content-big'>Content</div>
</div>

hidden with overflow
<div id='overflow-3' class='container' style='overflow-x: hidden; overflow-y: hidden'>
  <div class='content-big'>Content</div>
</div>

overlay with overflow
<div id='overflow-4' class='container' style='overflow-x: overlay; overflow-y: overlay'>
  <div class='content-big'>Content</div>
</div>

scroll without overflow
<div id='no-overflow-1' class='container' style='overflow-x: scroll; overflow-y: scroll'>
  <div class='content-small'>Content</div>
</div>

auto without overflow
<div id='no-overflow-2' class='container' style='overflow-x: auto; overflow-y: auto'>
  <div class='content-small'>Content</div>
</div>

hidden without overflow
<div id='no-overflow-3' class='container' style='overflow-x: hidden; overflow-y: hidden'>
  <div class='content-small'>Content</div>
</div>

overlay without overflow
<div id='no-overflow-4' class='container' style='overflow-x: overlay; overflow-y: overlay'>
  <div class='content-small'>Content</div>
</div>

<script>
  const mouse = GestureSourceType.MOUSE_INPUT;

  async function testScrollable(div_id, can_scroll) {
    let div = document.getElementById(div_id);
    div.scrollIntoView({ block: 'start', inline: 'start', behavior: 'instant' });
    await waitForCompositorCommit();

    let x = div.offsetLeft - window.scrollX + 5;
    let y = div.offsetTop - window.scrollY + 5
    await mouseMoveTo(x, y);

    await smoothScroll(10, x, y, mouse, 'down', 100000);
    await waitForCompositorCommit();
    await waitFor(
      () => {
        console.log(div_id + ':' + div.scrollTop);
        if (can_scroll)
          return div.scrollTop == 10;
        return div.scrollTop == 0;
      },
      'wait for ' + div_id + ' try vertical scroll.'
    );
    
    await smoothScroll(10, x, y, mouse, 'right', 100000);
    await waitForCompositorCommit();
    await waitFor(
      () => {
        if (can_scroll)
          return div.scrollLeft == 10;
        return div.scrollLeft == 0;
      },
      'wait for ' + div_id + ' try horizontal scroll.'
    );
  }

  window.onload = async () => {
    if (window.internals)
      internals.settings.setScrollAnimatorEnabled(false);
    await waitForCompositorCommit();

    promise_test(async () => {
      await testScrollable('overflow-1', true);
      await testScrollable('overflow-2', true);
      await testScrollable('overflow-3', false);
      await testScrollable('overflow-4', true);
      await testScrollable('no-overflow-1', false);
      await testScrollable('no-overflow-2', false);
      await testScrollable('no-overflow-3', false);
      await testScrollable('no-overflow-4', false);
    }, 'This tests that scrollable areas with the appropriate overflow mode set'
      + ' are in fact scrollable by the user.');
  };
</script>